<template>
  <div class="my-swiper">
    <swiper
      :modules="modules"
      :loop="true"
      :slides-per-view="0"
      :space-between="0"
      :speed="900"
      :autoplay="{ delay: 5000, disableOnInteraction: false }"
      :navigation="navigation"
      :slidesPerView="'auto'"
      :pagination="pagination"
      :centeredSlides="true"
      loopFillGroupWithBlank="true"
      class="swiper-container"
      @slideChange="onSlideChange2"
      @swiper="setSwiperInstance2"
    >
      <swiper-slide v-for="i in num" :key="i">
        <!-- 标题 -->
        <div
          class="duration-500 title"
          :class="`title${i + 1}`"
        ></div>
        <!-- 内容 -->
        <div class="relative item">
          <!-- 中心 -->
          <img
            class="absolute z-0 duration-300 img-0 "
            :class="`img${i + 1}-0`"
            :src="getAssetsFile(`${i + 1}-0.png`)"
          />
          <!-- 人 -->
          <img
            class="absolute z-10 people"
            :class="`img${i + 1}-1`"
            :src="getAssetsFile(`${i + 1}-1.png`)"
          />
          <!-- 右侧 -->
          <template v-if="i === 0">
            <img
              class="absolute z-10 slideInRight"
              :class="`img${i + 1}-2`"
              :src="getAssetsFile(`${i + 1}-2.png`)"
            />
            <img
              class="absolute z-10 slideInRight"
              :class="`img${i + 1}-3`"
              :src="getAssetsFile(`${i + 1}-3.png`)"
            />
            <img
              class="absolute z-10 slideInRight"
              :class="`img${i + 1}-4`"
              :src="getAssetsFile(`${i + 1}-4.png`)"
            />
          </template>
          <template v-else>
            <div>
              <img
                class="absolute z-10 slideInRight"
                :class="`img${i + 1}-2`"
                :src="getAssetsFile(`${i + 1}-2.png`)"
              />
              <img
                class="absolute z-10 slideInRight"
                :class="`img${i + 1}-3`"
                :src="getAssetsFile(`${i + 1}-3.png`)"
              />
            </div>
          </template>
          <!-- 左侧 -->
          <template v-if="i === 0">
            <img
              class="absolute z-10 slideInLeft"
              :class="`img${i + 1}-5`"
              :src="getAssetsFile(`${i + 1}-5.png`)"
            />
            <img
              class="absolute z-10 slideInLeft"
              :class="`img${i + 1}-6`"
              :src="getAssetsFile(`${i + 1}-6.png`)"
            />
            <img
              class="absolute z-10 slideInLeft"
              :class="`img${i + 1}-7`"
              :src="getAssetsFile(`${i + 1}-7.png`)"
            />
          </template>
          <template v-else>
            <div>
              <img
                class="absolute z-10 slideInLeft"
                :class="`img${i + 1}-4`"
                :src="getAssetsFile(`${i + 1}-4.png`)"
              />
              <img
                class="absolute z-10 slideInLeft"
                :class="`img${i + 1}-5`"
                :src="getAssetsFile(`${i + 1}-5.png`)"
              />
            </div>
          </template>
        </div>
      </swiper-slide>
      <img ref="prevRef" class="leftArrow" :src="state.LeftArrow" />
      <img ref="nextRef" class="rightArrow" :src="state.RightArrow" />
    </swiper>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import 'animate.css'
import 'animate.css/animate.compat.css'

import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper/modules'
import 'swiper/css'
import LeftArrow from '../assets/arrow_left.png'
import RightArrow from '../assets/arrow_right.png'

const state = reactive({
  LeftArrow: LeftArrow,
  RightArrow: RightArrow
})
const navigation = ref({
  prevEl: '.leftArrow',
  nextEl: '.rightArrow'
})
const pagination = ref({
  clickable: true
})
const modules = [ Pagination, Navigation,Autoplay,EffectFade]

const num = ref([0,1,2,3,4])

function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url)
}

const swiperInstance2 = ref(null)
const setSwiperInstance2 = (swiper) => {
  swiperInstance2.value = swiper
}
const onSlideChange2 = () => {
  if (swiperInstance2.value) {
    swiperInstance2.value.slides.forEach((slideEl) => {
      const circle = slideEl.querySelector('.img-0')
      if (circle) {
        circle.classList.remove('img-0')
        void circle.offsetWidth
        circle.classList.add('img-0')
      }

      const people = slideEl.querySelector('.people')
      if (people) {
        people.classList.remove('people')
        void people.offsetWidth
        people.classList.add('people')
      }

      const imgRights = slideEl.querySelectorAll('.slideInRight')
      if (imgRights.length) {
        imgRights.forEach((element) => {
          element.classList.remove('slideInRight')
          void element.offsetWidth
          element.classList.add('slideInRight')
        })
      }

      const imgLefts = slideEl.querySelectorAll('.slideInLeft')
      if (imgLefts.length) {
        imgLefts.forEach((element) => {
          element.classList.remove('slideInLeft')
          void element.offsetWidth
          element.classList.add('slideInLeft')
        })
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.my-swiper {
  width: 100%;
  overflow: hidden !important;
  display: flex;
  justify-content: center;
  position: relative;
}

.swiper-container {
  overflow: visible !important;
  position: relative;
  // width: 1498px;
  width: 1320px;
  height: 1020px;
  position: relative;
  border-radius: 15px;
}

.leftArrow {
  position: absolute;
  top: 50%;
  left: -85px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

.rightArrow {
  position: absolute;
  top: 50%;
  right: -85px;
  z-index: 1000;
  transform: translateY(-50%);
  cursor: pointer;
}

//页码样式穿透 也可自定义页码
:deep(.swiper-pagination) {
  bottom: 0px;
  align-items: center;
  display:flex;
  justify-content: center;
}
:deep(.swiper-pagination-bullet) {
  border: solid 1px #999;
  width:20px;
  height:20px;
  border-radius:100%;
  margin: 0 10px!important;
  opacity:1;
  background: #56160f;
}
:deep(.swiper-pagination-bullet-active) {
  background: #feeb62;
  border:4px solid #999;
  width:34px;
  height:34px;
}
:deep(.swiper-pagination-bullet:hover) {
}
:deep(.swiper-slide) {
  width: 100%;
  position: relative;
  // border-radius: 15px;
  transition: transform 2s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
:deep(.swiper-slide-prev) {
  transform: scale(0.9);
}
:deep(.swiper-slide-next) {
  transform: scale(0.9);
}
:deep(.swiper-slide-active) {
  .item {
    .img-0 {
      opacity: 1;
    }
    .people {
      opacity: 1;
    }
    .slideInRight {
      opacity: 1 !important;
    }
    .slideInLeft {
      opacity: 1 !important;
    }
  }
}
.title {
  height: 116px;
  background-position: center;
  background-repeat: no-repeat;
  &.title1 {
    background-image: url(../assets/title1-1.png);
  }
  &.title2 {
    background-image: url(../assets/title1-2.png);
  }
  &.title3 {
    background-image: url(../assets/title1-3.png);
  }
  &.title4 {
    background-image: url(../assets/title1-4.png);
  }
  &.title5 {
    background-image: url(../assets/title1-5.png);
  }
}
.item {
  margin-top: 20px;
  .img-0 {
    width: 665px;
    height: 665px;
    top: 73px;
    left: 328px;
    background-size: 100%;
    opacity: 0;
    animation: zoomIn 1.1s ease-in 0s forwards;
  }
  .people {
    opacity: 0;
    animation: slideInUp 1.5s ease-in 0s forwards;
  }
  .slideInRight {
    opacity: 0 !important;
    animation: slideInRight 1.6s ease-in 0s forwards;
  }
  .slideInLeft {
    opacity: 0 !important;
    animation: slideInLeft 1.8s ease-in 0s forwards;
  }
  .img1-1 {
    width: 255px;
    height: 258px;
    top: 525px;
    left: 405px;
  }
  .img1-2 {
    width: 250px;
    height: 250px;
    top: 561px;
    left: 963px;
  }
  .img1-3 {
    width: 292px;
    height: 272px;
    top: 260px;
    left: 1010px;
  }
  .img1-4 {
    width: 279px;
    height: 241px;
    top: 14px;
    left: 950px;
  }
  .img1-5 {
    width: 249px;
    height: 241px;
    top: 8px;
    left: 40px;
  }
  .img1-6 {
    width: 286px;
    height: 258px;
    top: 260px;
    left: 15px;
  }
  .img1-7 {
    width: 299px;
    height: 243px;
    top: 550px;
    left: 66px;
  }

  .img2-1 {
    width: 255px;
    height: 255px;
    top: 535px;
    left: 371px;
  }
  .img2-2 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 967px;
  }
  .img2-3 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 963px;
  }
  .img2-4 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 24px;
  }
  .img2-5 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 24px;
  }
  .img3-0 {
    width: 665px;
    height: 665px;
    top: 73px;
    left: 328px;
  }
  .img3-1 {
    width: 180px;
    height: 282px;
    top: 520px;
    left: 567px;
  }
  .img3-2 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 967px;
  }
  .img3-3 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 963px;
  }
  .img3-4 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 24px;
  }
  .img3-5 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 24px;
  }
  .img4-0 {
    width: 665px;
    height: 665px;
    top: 73px;
    left: 328px;
  }
  .img4-1 {
    width: 257px;
    height: 254px;
    top: 530px;
    left: 710px;
  }
  .img4-2 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 967px;
  }
  .img4-3 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 963px;
  }
  .img4-4 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 24px;
  }
  .img4-5 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 24px;
  }
  .img5-0 {
    width: 665px;
    height: 665px;
    top: 73px;
    left: 328px;
  }
  .img5-1 {
    width: 257px;
    height: 254px;
    top: 530px;
    left: 710px;
  }
  .img5-2 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 967px;
  }
  .img5-3 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 963px;
  }
  .img5-4 {
    width: 324px;
    height: 360px;
    top: 10px;
    left: 24px;
  }
  .img5-5 {
    width: 324px;
    height: 360px;
    top: 438px;
    left: 24px;
  }
}
</style>
